<template>
  <div class="newuser">

    <div class="mod-config">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item  style="margin-top: 80px">
          <el-input v-model="dataForm.name" placeholder="姓名" clearable></el-input>
        </el-form-item>
        <el-form-item  style="margin-top: 80px">
          <el-input v-model="dataForm.idCard" placeholder="身份证" clearable></el-input>
        </el-form-item>
        <el-form-item  style="margin-top: 80px">
          <el-select v-model="dataForm.auditStatus" placeholder="审核状态">
            <el-option
                label="未审核"
                value="未审核">
            </el-option>
            <el-option
                label="已通过"
                value="已通过">
            </el-option>
            <el-option
                label="未通过"
                value="未通过">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="display: flex;margin-bottom: 50px">
            <div style="margin-top: 80px">
              <el-button type="primary" @click="getDataList()">查询</el-button>
              <el-button type="info" @click="dataForm = {};getDataList()">清空条件</el-button>
              <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
              <el-button type="warning" @click="getExcelList()">导出到excel</el-button>
            </div>
          </div>

        </el-form-item>
      </el-form>
      <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
        <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            fixed
            prop="name"
            header-align="center"
            width="100"
            align="center"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="idNumber"
            header-align="center"
            width="170"
            align="center"
            label="身份证号">
        </el-table-column>
        <el-table-column
            prop="sex"
            header-align="center"
            width="50"
            align="center"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="age"
            header-align="center"
            align="center"
            label="年龄">
        </el-table-column>
        <el-table-column
            prop="politicalStatus"
            header-align="center"
            align="center"
            label="政治面貌">
        </el-table-column>
        <el-table-column
            prop="province"
            header-align="center"
            align="center"
            label="省份">
        </el-table-column>
        <el-table-column
            prop="province"
            header-align="center"
            align="center"
            label="具体省份市州">
          <template slot-scope="scope">
            <span>{{scope.row.provinceContent+""+scope.row.city}}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="nation"
            header-align="center"
            align="center"
            label="民族">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="sourceHospital"-->
<!--            header-align="center"-->
<!--            align="center"-->
<!--            label="医院名称">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="phone"
            header-align="center"
            align="center"
            label="联系电话">
        </el-table-column>
        <el-table-column
            prop="workUnit"
            header-align="center"
            align="center"
            label="工作单位">
        </el-table-column>

        <el-table-column
            prop="emergencyContactPhone"
            header-align="center"
            align="center"
            label="工作单位选派部门及联系电话">
        </el-table-column>

        <el-table-column
            prop="emergencyContactPhone"
            header-align="center"
            align="center"
            label="工作单位选派部门及联系电话">
        </el-table-column>
        <el-table-column
            prop="isMemberUnit"
            header-align="center"
            align="center"
            label="是否为我院“湘中医”医疗联盟成员单位">
        </el-table-column>
        <el-table-column
            prop="isCertification"
            header-align="center"
            align="center"
            label="是否有相关专业资格证">
        </el-table-column>
        <el-table-column
            prop="studyRoom"
            header-align="center"
            width="120"
            align="center"
            label="进修科目">
        </el-table-column>
        <el-table-column
            prop="studyType"
            header-align="center"
            width="120"
            align="center"
            label="申请进修类别">
        </el-table-column>
        <el-table-column
            prop="position"
            header-align="center"
            width="120"
            align="center"
            label="职称">
        </el-table-column>
        <el-table-column
            prop="studyProject"
            header-align="center"
            width="120"
            align="center"
            label="申请进修项目">
        </el-table-column>
        <el-table-column
            prop="batch"
            header-align="center"
            width="120"
            align="center"
            label="批次">
        </el-table-column>
        <el-table-column
            prop="auditStatus"
            header-align="center"
            width="100"
            align="center"
            label="审核状态">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.auditStatus==='未审核'" effect="dark" type="info">{{scope.row.auditStatus}}</el-tag>
            <el-tag v-show="scope.row.auditStatus==='已通过'" effect="dark" type="success">{{scope.row.auditStatus}}</el-tag>
            <el-tag v-show="scope.row.auditStatus==='未通过'" effect="dark" type="danger">{{scope.row.auditStatus}}</el-tag>
            <p v-show="!(scope.row.auditStatus==='未审核')">审核人: {{scope.row.auditor}}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="auditComment"
            header-align="center"
            width="120"
            align="center"
            label="审核内容">
        </el-table-column>
        <el-table-column
            prop="idNumberImg"
            header-align="center"
            width="180"
            align="center"
            label=五证PDF>
          <template slot-scope="scope">
              <el-button type="primary" @click="onPDf(scope.row.idNumberImg)">点击预览PDF</el-button>
          </template>
        </el-table-column>
        <el-table-column
            prop="applicationForm"
            header-align="center"
            width="200"
            align="center"
            label="进修申请表">
          <template slot-scope="scope">
            <div class="demo-image__preview">
<!--              <el-image-->
<!--                  @click="clickImg(scope.row.applicationForm)"-->
<!--                  style="width: 150px; height: 150px"-->
<!--                  :src="scope.row.applicationForm"-->
<!--                  :preview-src-list="srcList"-->
<!--              >-->
<!--              </el-image>-->
              <AuthImg :auth-src="scope.row.applicationForm">

              </AuthImg>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="agreement"
            header-align="center"
            width="200"
            align="center"
            label="进修管理协议">
          <template slot-scope="scope">
            <div class="demo-image__preview">
<!--              <el-image-->
<!--                  @click="clickImg(scope.row.agreement)"-->
<!--                  style="width: 150px; height: 150px"-->
<!--                  :src="scope.row.agreement"-->
<!--                  :preview-src-list="srcList"-->
<!--              >-->
<!--              </el-image>-->
              <AuthImg :auth-src="scope.row.agreement">

              </AuthImg>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="certificate"
            header-align="center"
            width="200"
            align="center"
            label="合同公证书">
          <template slot-scope="scope">
            <div class="demo-image__preview">
<!--              <el-image-->
<!--                  @click="clickImg(scope.row.certificate)"-->
<!--                  style="width: 150px; height: 150px"-->
<!--                  :src="scope.row.certificate "-->
<!--                  :preview-src-list="srcList"-->
<!--              >-->
<!--              </el-image>-->

              <AuthImg :auth-src="scope.row.certificate">

              </AuthImg>
            </div>
          </template>
        </el-table-column>


        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
          <template slot-scope="scope">
<!--            <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
            <el-button type="primary" size="small"  @click="setAuditStatus(scope.row)">审核</el-button>
            <el-button  type="danger" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 15, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <newUserAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" ></newUserAddOrUpdate>
    </div>
    <el-dialog
        title="修改审核状态"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <van-cell-group>
        <van-field v-model="auditor" label="审核人" placeholder="请输入审核人" />
        <van-field v-model="auditComment" label="审核内容" placeholder="请输入审核内容" />
      </van-cell-group>
      <span slot="footer" class="dialog-footer">
        <el-button  type="success" @click="onAudit(0)">确认通过</el-button>
        <el-button type="danger" @click="onAudit(1)">遗憾落选</el-button>
      </span>
    </el-dialog>
    <el-dialog title="五合一PDF" :visible.sync="WdialogTableVisible">
      <div class="m-pdf">
        <div id="pdf-content" />
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {UserMsgAudit, UserMsgDetele, UserMsgimportExcel, UserMsgList} from "@/request/utils/user";

import img from  '@/assets/logo.png'
import {GetImge} from "@/request/utils/file";
import AuthImg from "@/components/AuthImg";
export default {
  name: "NewUser",
  components: {AuthImg},
  data() {
    return {
      dataForm: {
        name: '',
        idCard: '',
        auditStatus:''
      },
      item: '',
      auditor: '',
      newUserId: 0,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      admins: ["admin","lvchaofeng"],
      srcList: [],
      centerDialogVisible: false,
      auditComment: '',
    WdialogTableVisible: false,
      pdfurl: "",
    }
  },
  //计算属性 类似于data概念
  computed: {
  },
  filters:{
    relativeTime (val) {
      const date = new Date(val);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
    }
  },
  //方法集合
  methods: {
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true

      UserMsgList({
        'page': this.pageIndex,
        'limit': this.pageSize,
        'name': this.dataForm.name,
        'idCard': this.dataForm.idCard,
        'auditStatus': this.dataForm.auditStatus
      }).then(res=>{
        if (res && res.code === 0) {
          this.dataList = res.data.list
          this.dataList=this.dataList.filter(item=>{
             return item.id!=="1";
          })
          this.totalPage = res.data.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })


    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    setAuditStatus(row){
      this.centerDialogVisible = true;
      this.item = row
    },
    onAudit(flag){
      if(flag===0){
        this.item.auditStatus = "已通过"
      }else {
        this.item.auditStatus = "未通过"
      }
      this.item.auditor = this.auditor
      this.item.auditComment = this.auditComment
      UserMsgAudit(this.item).then(res=>{
        if (res.code === 0){
          this.$message({
            message: '审核状态修改成功',
            type: 'success'
          });
        }else {
          this.$message.error(res.msg);
        }
        this.centerDialogVisible = false
      })
    },
    getExcelList(){
      UserMsgimportExcel().then(res=>{
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        });
        console.log(blob)
        let link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download', '录入数据信息.xlsx');
        link.click();
        link = null;
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定对报名信息进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UserMsgDetele(ids).then(data => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    },
    clickImg(baseimg){
      this.srcList = [];
      this.srcList.push(baseimg)
    },
    onPDf(idNumberImg){
      // this.WdialogTableVisible = true;
      this.pdfurl = idNumberImg;
      console.log("ss")
      const token = localStorage.getItem('token');
      return new Promise((resolve, reject) => {
        let blob = null;
        let xhr = new XMLHttpRequest();
        xhr.open("GET", idNumberImg);
        xhr.responseType = "blob";
        xhr.setRequestHeader("token", token)
        xhr.onload = () => {
          blob = xhr.response;
          const blobob = new Blob([blob], { type: 'application/pdf;charset=utf-8' });
          const href = window.URL.createObjectURL(blobob);
          window.open(href, 'newWindow');
          console.log(href)
          resolve(href);
        };
        xhr.onerror = (e) => {
          reject(e)
        };
        xhr.send();
      });

    },
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.getDataList();
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped>
.upload-demo{
  margin-left: 500px;
  height: 150px;
}
.upload-demo>div{
  height: 150px;
}
.el-upload-dragger{
  height: 150px;
}
</style>